<template>
	<div class="home">
		<div class="home1">
			<homeSider></homeSider>
		</div>
		<div class="home2" :style="data.windowWidth">
			<div>
				<homeHand :key="routerKey" v-if="data.isAlive"></homeHand>
			</div>
			<div>
				<homeBody :key="routerKey2" v-if="data.isAlive2"></homeBody>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {ref, onMounted,provide, nextTick} from 'vue'
  import {usePermissions} from "../store/authority";

  /**
   * 数据源
   */
  const data=ref({
    windowWidth:0,
    toLowerCase:'',
    windowHeight:0,
    isAlive:true,//ruoter-Keep 保持状态(hand)
    isAlive2:true,//ruoter-Keep 保持状态（body）
  })

  onMounted (()  => {
    // console.log(moment().format('YYYY-MM-DD hh:mm'))
    usePermissions().updataUser();//更新用户信息
    getWindowResize();//获取屏幕尺寸
    window.addEventListener('resize', getWindowResize)
  })

  /**
   * 重载方法
   */
  function reload() {
    data.value.isAlive = false
    nextTick(() => {
      data.value.isAlive = true
    })
  }
  function reload2(){
  data.value.isAlive2 = false
  nextTick(() => {
    data.value.isAlive2 = true
  })
}
  /**
   * 抛出重载方法
   */
  provide('reload', reload);
  provide('reload2', reload2);
  /**
   *  获取屏幕尺寸
   */
	const getWindowResize = function() {
		data.value.windowWidth = 'width:' + (window.innerWidth - 120) + 'px';
    data.value.windowHeight = window.innerHeight
	}
</script>

<style lang="less" scoped>
	.home {
		width: 100vw;
		height: 100vh;
		background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.home1 {
		height: 100vh;
		transform-origin: left;
		transition-duration: 1.5s;
	}

	.home2 {
		height: 97vh;
		overflow: hidden;
		transform-origin: right;
		border-radius: 0.5rem;
		background-color: white;
		margin-right: 10px;
	}
</style>
